<template>
  <div class="content-area">
    <div class="fault-info-container">
      <h2>故障信息查询</h2>

      <div class="search-form">
        <div class="form-item">
          <label for="startDate">起始时间:</label>
          <el-date-picker
            v-model="searchCriteria.startDate"
            type="datetime"
            placeholder="选择起始时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            id="startDate"
            clearable
          ></el-date-picker>
        </div>
        <div class="form-item">
          <label for="endDate">结束时间:</label>
          <el-date-picker
            v-model="searchCriteria.endDate"
            type="datetime"
            placeholder="选择结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            id="endDate"
            clearable
          ></el-date-picker>
        </div>
        <div class="form-item">
          <label for="device">装置:</label>
          <el-select v-model="searchCriteria.device" placeholder="选择装置" clearable id="device">
            <el-option label="所有装置" value=""></el-option>
            <el-option label="联醇装置" value="联醇装置"></el-option>
            <el-option label="解吸浓缩系统装置" value="解吸浓缩系统装置"></el-option>
          </el-select>
        </div>
        <div class="form-item">
          <label for="faultType">故障类型:</label>
          <el-input
            v-model="searchCriteria.faultType"
            placeholder="请输入故障类型关键字"
            clearable
            id="faultType"
          ></el-input>
        </div>
        <div class="form-item">
          <el-button type="primary" @click="applyFilters">查询</el-button>
          <el-button @click="resetFilters">重置</el-button>
        </div>
      </div>

      <el-table :data="paginatedFaults" stripe style="width: 100%; margin-top: 20px" border>
        <el-table-column prop="time" label="发生时间" width="180"></el-table-column>
        <el-table-column prop="device" label="所属装置" width="150"></el-table-column>
        <el-table-column prop="type" label="故障类型"></el-table-column>
        <el-table-column prop="method" label="处理方法"></el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filteredFaults.length"
        background
        style="margin-top: 20px; text-align: right"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  ElTable,
  ElTableColumn,
  ElDatePicker,
  ElSelect,
  ElOption,
  ElInput,
  ElButton,
  ElPagination,
} from 'element-plus'

// 硬编码的故障数据
const ALL_FAULT_DATA = [
  {
    time: '2025-06-30 14:30:15',
    device: '联醇装置',
    type: '传感器 A 异常',
    method: '检查 FI615 传感器连接，校准或更换。',
  },
  {
    time: '2025-06-29 09:00:00',
    device: '解吸浓缩系统装置',
    type: '泵 B1 过载',
    method: '检查泵 B1 电流和振动，确认是否有堵塞或机械故障。',
  },
  {
    time: '2025-06-28 10:20:00',
    device: '联醇装置',
    type: '阀门 V101 堵塞',
    method: '清理阀门，检查管道是否有异物。',
  },
  {
    time: '2025-06-27 16:45:00',
    device: '解吸浓缩系统装置',
    type: '冷却系统效率低下',
    method: '检查冷却水循环系统和散热片清洁度。',
  },
  {
    time: '2025-06-26 11:00:00',
    device: '联醇装置',
    type: 'DCS 通讯故障',
    method: '检查通讯线路和 DCS 模块，重启系统。',
  },
  {
    time: '2025-06-25 08:10:00',
    device: '联醇装置',
    type: '电机温度过高',
    method: '检查电机散热，润滑剂，或轴承磨损。',
  },
  {
    time: '2025-06-24 13:55:00',
    device: '解吸浓缩系统装置',
    type: '液位传感器读数错误',
    method: '校准或更换液位传感器。',
  },
  {
    time: '2025-06-23 14:30:15',
    device: '联醇装置',
    type: '传感器 B 异常',
    method: '检查 LI102 传感器连接，校准或更换。',
  },
  {
    time: '2025-06-22 09:00:00',
    device: '解吸浓缩系统装置',
    type: '泵 C2 异响',
    method: '检查泵 C2 轴承和联轴器，确认是否有松动。',
  },
  {
    time: '2025-06-21 10:20:00',
    device: '联醇装置',
    type: '管道泄漏',
    method: '检查管道焊接点和法兰密封，进行修补。',
  },
  {
    time: '2025-06-20 16:45:00',
    device: '解吸浓缩系统装置',
    type: '电源波动',
    method: '检查供电系统，稳压器，或 UPS。',
  },
  {
    time: '2025-06-19 11:00:00',
    device: '联醇装置',
    type: '控制回路失效',
    method: '检查 PLC 程序，I/O 模块，或控制阀。',
  },
  {
    time: '2025-06-18 08:10:00',
    device: '联醇装置',
    type: '风机振动超标',
    method: '检查风机叶片平衡，轴承，或安装基础。',
  },
  {
    time: '2025-06-17 13:55:00',
    device: '解吸浓缩系统装置',
    type: '蒸发器结垢',
    method: '进行化学清洗或物理清理蒸发器。',
  },
  {
    time: '2025-06-16 14:30:15',
    device: '联醇装置',
    type: '温度传感器故障',
    method: '检查温度传感器接线，或更换传感器。',
  },
  {
    time: '2025-06-15 09:00:00',
    device: '解吸浓缩系统装置',
    type: '冷却塔风扇停转',
    method: '检查风扇电机，启动器，或皮带。',
  },
]

const searchCriteria = ref({
  startDate: null,
  endDate: null,
  device: '',
  faultType: '',
})

const currentPage = ref(1)
const pageSize = ref(10)

const filteredFaults = computed(() => {
  return ALL_FAULT_DATA.filter((fault) => {
    const faultTime = new Date(fault.time).getTime()

    // 按时间筛选
    if (
      searchCriteria.value.startDate &&
      faultTime < new Date(searchCriteria.value.startDate).getTime()
    ) {
      return false
    }
    if (
      searchCriteria.value.endDate &&
      faultTime > new Date(searchCriteria.value.endDate).getTime()
    ) {
      return false
    }

    // 按装置筛选
    if (searchCriteria.value.device && fault.device !== searchCriteria.value.device) {
      return false
    }

    // 按故障类型关键字筛选
    if (searchCriteria.value.faultType && !fault.type.includes(searchCriteria.value.faultType)) {
      return false
    }
    return true
  }).sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()) // 按时间倒序排序
})

const paginatedFaults = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredFaults.value.slice(start, end)
})

const applyFilters = () => {
  currentPage.value = 1 // 每次应用筛选时重置到第一页
  // 筛选逻辑由 computed 属性处理
}

const resetFilters = () => {
  searchCriteria.value = {
    startDate: null,
    endDate: null,
    device: '',
    faultType: '',
  }
  currentPage.value = 1
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1 // 改变每页大小时回到第一页
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped>
/* content-area 的基础样式已经在全局 style.css 中，这里仅作为容器 */
.content-area {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  background-color: #f0f2f5;
}

.fault-info-container {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex: 1; /* 占据 content-area 的剩余空间 */
  overflow-y: auto; /* 如果内容超高，允许滚动 */
}

h2 {
  color: #3f51b5;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.5em;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.search-form {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 15px; /* 表单项之间的间距 */
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #f0f2f5;
  border-radius: 8px;
  background-color: #fafafa;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-item label {
  color: #555;
  font-size: 0.95em;
  flex-shrink: 0; /* 防止标签收缩 */
}

/* 调整 Element Plus 组件的宽度 */
.el-date-picker,
.el-select,
.el-input {
  width: 200px; /* 统一输入框宽度 */
}

/* 按钮组 */
.form-item .el-button {
  min-width: 80px;
}
</style>
